<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <el-input
          v-model="form.field_name"
          class="w-40"
          placeholder="字段名称"
        ></el-input>
        <VCascader
          v-model="form.auth_user_id"
          placeholder="用户"
          multiple
          collapse-tags
          filterable
          clearable
          style="min-width: 160px"
        />
        <VGroup>
          <div class="v-group-item">更新时间</div>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VButton
          auth="/purchase/settings/field/add"
          type="primary"
          @click="handleAdd"
          ><i class="dk-iconfont icon-Plus" />添加</VButton
        >
        <VButton
          auth="/purchase/settings/field/add"
          type="primary"
          @click="handleBatch('supplier')"
          >批量添加</VButton
        >
        <VExport
          auth="/purchase/settings/field/export"
          mainKey="fa_id"
          :name="baseName"
          :tableRef="tableRef"
          class="ml-auto"
        />
      </template>
    </VTable>
    <Add ref="addRef" :options="options" @success="query" />
    <AddSupplier ref="addSupplieref" @success="query" />
    <VLog ref="logRef" />
  </VPage>
</template>
<script setup lang="jsx">
import { getOption } from "@/api/public";
import { ElMessage, ElMessageBox } from "element-plus";
import { fieldList, fieldDelete } from "./api.js";
import AddSupplier from "./components/AddSupplier/index";
import Add from "./components/Add/index";
const tableRef = ref();
// 查询
const query = () => {
  tableRef?.value.query();
};
const addRef = ref();
const handleAdd = () => {
  addRef?.value.open();
};
const addSupplieref = ref();
const handleBatch = (name) => {
  const selection = tableRef.value.$table.getCheckboxRecords();
  if (!selection.length) {
    ElMessage.warning("请先选择行");
    return;
  }
  const fa_ids = selection.map((d) => d.fa_id);
  const handle = {
    supplier: () => {
      addSupplieref.value?.open(fa_ids);
    },
  };
  handle[name]();
};
const logRef = ref();

const baseName = "field_auth";
// 获取options
const options = ref({});
getOption({ type: baseName }).then((res) => {
  options.value = res.data;
});

// 删除
const handleDelete = (fa_id) => {
  ElMessageBox.confirm("此操作将删除该配置, 是否继续？", "提示", {
    confirmButtonClass: "messagebox-confirm-button",
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      fieldDelete({ fa_ids: [fa_id] }).then((res) => {
        query();
        ElMessage({ type: "success", message: "删除成功!" });
      });
    })
    .catch(() => {
      ElMessage({ type: "info", message: "取消操作" });
    });
};

// 列表配置
const tableOptions = reactive({
  showOverflow: false,
  formConfig: {
    data: {
      dateRange: { type: "update_time", value: [], range: true },
    },
  },
  columns: [
    { type: "checkbox", width: 40, fixed: "left" },
    { field: "auth_user_name", title: "用户", minWidth: 120 },
    { field: "field_name", title: "字段", minWidth: 120 },
    {
      field: "todo",
      title: "可查看供应商",
      minWidth: 120,
      slots: {
        default: ({ row, rowIndex }) => {
          return (
            <VMore key={rowIndex}>
              {{
                default: (line) =>
                  (row.relation_data || []).map((d) => (
                    <div class="w-full">
                      <VText
                        value={`${d?.relation_name || "-"} (${
                          d?.supplier_cn_name || "-"
                        })`}
                        line={line}
                      />
                    </div>
                  )),
              }}
            </VMore>
          );
        },
      },
    },
    {
      field: "update_time",
      title: "更新信息",
      minWidth: 120,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <VText title="更新人" value={row.update_user} />
              <VText title="更新时间" value={row.update_time} />
            </div>
          );
        },
      },
    },
    {
      field: "update_time",
      title: "添加信息",
      minWidth: 120,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <VText title="添加人" value={row.create_user} />
              <VText title="添加信息" value={row.create_time} />
            </div>
          );
        },
      },
    },
    {
      title: "操作",
      width: 150,
      fixed: "right",
      slots: {
        default: ({ row, rowIndex }) => {
          const { fa_id } = row;
          return (
            <div class="nm flex gap-2">
              <VButton
                auth="/purchase/settings/field/edit"
                link
                type="primary"
                onClick={() => addRef?.value.open(fa_id)}
              >
                编辑
              </VButton>
              <VButton
                auth="/purchase/settings/field/delete"
                link
                type="danger"
                onClick={() => handleDelete(fa_id)}
              >
                删除
              </VButton>
              <VButton
                auth="/purchase/settings/field/log"
                link
                type="primary"
                onClick={() =>
                  logRef?.value.open({ log_type: baseName, fa_id })
                }
              >
                日志
              </VButton>
            </div>
          );
        },
      },
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => fieldList({ ...form, ...page }),
    },
  },
});
</script>
<style lang="scss" scoped></style>
